<template>
    <view class="flex-col homepage">
        <view class="flex-row wrapper">
            <view class="u-line-1 text">持卡人姓名</view>
            <u-input class="input" v-model="input" placeholder="请输入"></u-input>
        </view>
        <view class="flex-row wrapper-two">
            <view class="u-line-1 text-two">手机号码</view>
            <u-input class="input1" v-model="input1" placeholder="请输入"></u-input>
        </view>
        <view class="flex-row wrapper-three">
            <view class="u-line-1 text-three">绑定车辆</view>
            <view class="u-line-1 text-four">宝马X7</view>
            <view class="u-line-1 text-five">></view>
        </view>
        <view class="flex-col flex-row wrapper-four">
            <view class="flex-row wraper-row">
                <view class="u-line-1 text-six">办理人</view>
                <view class="u-line-1 text-seven">王佳鑫</view>
            </view>
            <view class="flex-row wraper-row-two">
                <view class="u-line-1 text-eight">生效日期</view>
                <view class="u-line-1 text-nine">2022/05/06</view>
                <view class="u-line-1 text-ten">></view>
            </view>
        </view>
        <view class="flex-row wrapper-five">
            <view class="u-line-1 text-eleven">到期时间</view>
            <view class="u-line-1 text-twelve">2022/05/06</view>
            <view class="u-line-1 text-thirteen">></view>
        </view>
        <view class="flex-row wrapper-six">
            <view class="u-line-1 text-fourteen">费用合计</view>
            <view class="u-line-1 text-fifteen">￥1000.00</view>
        </view>
        <view class="flex-col wrapper-seven">
            <view class="u-line-1 text-sixteen">备注</view>
            <u-input class="input-two" v-model="input3" placeholder="请输入"></u-input>
        </view>
        <u-button class="button" type="success" size="medium">
            确认购买
        </u-button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                form: {
                    input: "",
					input1: ""
                }
            }
        },
        methods: {

        }
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        padding: 40rpx 0rpx 180rpx 12rpx;

        .wrapper {
            width: 686rpx;
            justify-content: space-between;
            margin-left: 6rpx;
            padding: 29rpx 201rpx 29rpx 11rpx;
            border-bottom-width: 2rpx;
            border-bottom-style: solid;
            border-bottom-color: rgba(226, 226, 226, 1);

            .text {
                width: 180rpx;
                margin-top: 10rpx;
                font-size: 30rpx;
                font-weight: 600;
                color: rgba(106, 106, 106, 1);
            }

            .input {
                width: 444rpx;
                height: 52rpx;
				margin-top: 10rpx;
				border: none;
            }
        }

        .wrapper-two {
            width: 686rpx;
            justify-content: space-between;
            margin: 0rpx 0rpx 2rpx 6rpx;
            padding: 29rpx 200rpx 29rpx 10rpx;
            border-bottom-width: 2rpx;
            border-bottom-style: solid;
            border-bottom-color: rgba(226, 226, 226, 1);

            .text-two {
                width: 180rpx;
                margin-top: 12rpx;
                font-size: 30rpx;
                font-weight: 600;
                color: rgba(106, 106, 106, 1);
            }

            .input1 {
                width: 444rpx;
                height: 52rpx;
            	margin-top: 10rpx;
            	border: none;
            }
        }

        .wrapper-three {
            width: 686rpx;
            margin-left: 6rpx;
            padding: 40rpx 0rpx 38rpx 9rpx;
            border-bottom-width: 2rpx;
            border-bottom-style: solid;
            border-bottom-color: rgba(226, 226, 226, 1);

            .text-three {
                width: 126rpx;
                margin: 2rpx 102rpx 0rpx 0rpx;
                font-size: 30rpx;
                font-weight: 600;
                color: rgba(119, 119, 119, 1);
            }

            .text-four {
                width: 116rpx;
                margin-right: 308rpx;
                font-size: 30rpx;
                font-weight: 600;
                color: rgba(106, 106, 106, 1);
            }

            .text-five {
                width: 28rpx;
            }
        }

        .wrapper-four {
            width: 690rpx;
            margin: 0rpx 0rpx -2rpx 6rpx;

            .wraper-row {
                width: 686rpx;
                justify-content: space-between;
                margin-bottom: -12rpx;
                padding: 33rpx 354rpx 40rpx 10rpx;
                border-bottom-width: 2rpx;
                border-bottom-style: solid;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-six {
                    width: 126rpx;
                    font-size: 30rpx;
                    font-weight: 600;
                    color: rgba(119, 119, 119, 1);
                }

                .text-seven {
                    width: 116rpx;
                    margin-top: 6rpx;
                    font-size: 30rpx;
                    font-weight: 600;
                    color: rgba(106, 106, 106, 1);
                }
            }

            .wraper-row-two {
                width: 686rpx;
                padding: 40rpx 0rpx 40rpx 9rpx;
                border-bottom-width: 2rpx;
                border-bottom-style: solid;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-eight {
                    width: 126rpx;
                    margin-right: 92rpx;
                    font-size: 30rpx;
                    font-weight: 600;
                    color: rgba(119, 119, 119, 1);
                }

                .text-nine {
                    width: 244rpx;
                    margin-right: 190rpx;
                    font-size: 30rpx;
                    font-weight: 600;
                    color: rgba(106, 106, 106, 1);
                }

                .text-ten {
                    width: 28rpx;
                }
            }
        }

        .wrapper-five {
            width: 686rpx;
            margin-left: 6rpx;
            padding: 39rpx 0rpx 40rpx 13rpx;
            border-bottom-width: 2rpx;
            border-bottom-style: solid;
            border-bottom-color: rgba(226, 226, 226, 1);

            .text-eleven {
                width: 126rpx;
                margin-right: 88rpx;
                font-size: 30rpx;
                font-weight: 600;
                color: rgba(119, 119, 119, 1);
            }

            .text-twelve {
                width: 244rpx;
                margin-right: 190rpx;
                font-size: 30rpx;
                font-weight: 600;
                color: rgba(106, 106, 106, 1);
            }

            .text-thirteen {
                width: 28rpx;
            }
        }

        .wrapper-six {
            width: 686rpx;
            height: 120rpx;
            justify-content: space-between;
            margin-left: 6rpx;
            padding: 31rpx 285rpx 0rpx 15rpx;
            border-bottom-width: 2rpx;
            border-bottom-style: solid;
            border-bottom-color: rgba(226, 226, 226, 1);

            .text-fourteen {
                width: 126rpx;
                font-size: 30rpx;
                font-weight: 600;
                color: rgba(119, 119, 119, 1);
            }

            .text-fifteen {
                width: 190rpx;
                font-size: 32rpx;
                font-weight: 700;
                color: rgba(255, 131, 131, 1);
            }
        }

        .wrapper-seven {
            width: 696rpx;
            height: 228rpx;
            margin-bottom: 146rpx;
            padding: 23rpx 0rpx 0rpx 14rpx;
            border-bottom-width: 2rpx;
            border-bottom-style: solid;
            border-bottom-color: rgba(210, 210, 210, 1);

            .text-sixteen {
                width: 80rpx;
                margin-bottom: 36rpx;
                font-size: 30rpx;
                font-weight: 600;
                color: rgba(74, 74, 74, 1);
            }

            .input-two {
				width: 644rpx;
				height: 62rpx;
				border:none;
            }
        }

        .button {
            width: 696rpx;
            height: 80rpx;
            margin: 1rpx 0rpx 0rpx 12rpx;
            font-size: 34rpx;
            background: rgba(48, 121, 255, 1);
            font-weight: 600;
        }
    }
</style>